<template>
  <up-popup :show="show" round="24rpx" mode="bottom" closeable @close="close">
    <view class="popup-list">
      <view class="popup-title">选择类型</view>
      <view class="popup-nav">
        <view class="nav-centent" v-for="(item, index) in listData" :key="index" @click="torelease(item)">
          <image :src="item.image" class="tab-img" mode="widthFix" lazy-load="ture"></image>
          <view class="nav-text">{{item.name}}</view>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
  import {
    ref,
    reactive,
    defineProps,
    defineEmits
  } from 'vue'
  const {
    show,
    listData
  } = defineProps(['show', "listData"])
  const emit = defineEmits(['showClose', 'release'])
  const showPopup = ref()

  function close() {
    emit('showClose', false)
  }

  function torelease(item) {
    const token = uni.getStorageSync('userInfo').token
    if (token) {
      uni.setStorageSync('treasure', item)
      emit("release", item)
    } else {
      uni.navigateTo({
        url: '/pages/my/loginPage'
      })
    }
  }
</script>

<style lang="scss" scoped>
  .popup-list {
    width: 100vw;
    opacity: 1;
    display: flex;
    flex-direction: column;

    .popup-title {
      width: 100%;
      height: 88rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 88rpx;
      color: rgba(51, 51, 51, 1);
      text-align: center;
      border-bottom: 2rpx solid #EBEBEB;
    }

    .popup-nav {
      width: 105vw;
      display: flex;
      flex: 1;
      align-items: center;
      box-sizing: border-box;
      padding: 40rpx 30rpx;
      flex-wrap: wrap;

      .nav-centent {
        width: 216rpx;
        height: 96rpx;
        opacity: 1;
        border-radius: 16rpx;
        border: 2rpx solid #EBEBEB;
        margin: 12rpx 20rpx 12rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-evenly;

        .tab-img {
          width: 56rpx;
          height: 56rpx;
        }

        .nav-text {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(51, 51, 51, 1);

        }
      }
    }
  }
</style>